<template>
	<view class="dialog_container" v-if="display">
		<view class="dialog-mask"></view>
		<view class="shell-main">
			<view class="shell-title">{{title}}</view>
			<slot></slot>
			<text class="shell-btn">{{confirmText}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		name:"dialog-shell",
		props:{
			title:{
				required: true,
				type: String,
				validator: value => {
					return value.length > 0
				}
			},
			confirmText:{
				type: String,
				required ; false,
				default : "确认",
			}
		},
		data() {
			return {
				display: false
			};	
		},
		methods:{
			showDialog(){
				this.display=true
			},
			hideDialog(){
				this.display=false
			}
		}
	}
</script>

<style>
.dialog-container{
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 1;
	
}
.dialog-mask{
	opacity: 0.5;
	background-color: black;
	position: absolute;
	top:0;
	width: 100%;
	height: 100%;
	min-height: 100vh;
}
.shell-main{
	display: flex;
	flex-direction: column;
	position: absolute;
	opacity: 1;
	width: 80%;
	margin-left: 10%;
	margin-top: 40%;
	background-color: white;
	border-radius: 15rpx;
}
.shell-title{
	font-size: 30rpx;
	padding-left: 15rpx;
	color: white;
	background-color: #cc3300;
	border-top-left-radius: 15rpx;
	border-top-right-radius: 15rpx;
}
.shell-btn{
	color"#cc3300";
	font-size: 30rpx;
	text-align: center;
	font-weight: bold;
	
}
</style>
